import React, { useState, useEffect } from 'react'
import { getTypeListInfo } from '../api/ARTType'
import { getVisitCount } from '../api/dashbord'
import { Row, Col, Table } from 'antd'
import '../style/dashbord.css'
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

const { Column } = Table


function Dashbord() {

  const [typeList, setTypeList] = useState([])
  const [typeList2, setTypeList2] = useState([])

  useEffect(() => {
    getTypeList()
    setTimeout(() => { getVisitCountList() }, 200)
  }, [])


  const getTypeList = async () => {
    let res = await getTypeListInfo()
    const { list } = res
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('art-total'));
    let tagsData = []
    let countData = []
    list.forEach(element => {
      tagsData.push(element.typeName)
      countData.push(element.total)
    });
    // 绘制图表
    const options = {
      tooltip: {},
      grid: {
        show: true,
        top: '5%',
        left: '2%',
        right: '2%',
        bottom: '2%',
        containLabel: true,
      },
      xAxis: {
        data: tagsData
      },
      yAxis: {},
      series: [{
        name: '文章数量',
        type: 'bar',
        data: countData
      }]
    }
    myChart.setOption(options, true);
  }

  const getVisitCountList = async () => {
    const res = await getVisitCount()
    let myChart = echarts.init(document.getElementById('web-visit'));
    const { list } = res
    let daysData = []
    let countData = []
    list.forEach(element => {
      daysData.push(element.days)
      countData.push(element.total)
    });
    const options = {
      tooltip: {},
      grid: {
        show: true,
        top: '5%',
        left: '2%',
        right: '2%',
        bottom: '2%',
        containLabel: true,
      },
      xAxis: {
        data: daysData
      },
      yAxis: {},
      series: [{
        name: '访问数量',
        type: 'line',
        data: countData,
      }]
    }
    myChart.setOption(options, true);
  }


  return (
    <div className="dashbord-div">
      <Row gutter={10}>
        <Col span={24} className="row-col">
          <div className="date-title">文章列表数量统计</div>
          <div id="art-total"></div>
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={24} className="row-col">
          <div className="date-title">网站访问记录</div>
          <div id="web-visit"></div>
        </Col>
      </Row>
    </div>
  )
}
export default Dashbord